<template>
  <div class="add-area">
    <div class="text"><el-icon><Tickets /></el-icon><span>数据列表</span></div>
    <el-button @click="showDialog = true">添加</el-button>
  </div>
  <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="编号" align="center"/>
        <el-table-column prop="name" label="原因类型" align="center" />
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column label="是否启用">
      <template #default="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="switchStatus(row)"/>
      </template>
    </el-table-column>
        <el-table-column prop="createTime" label="添加时间">
            <template #default="{ row }">
        {{ formateDate(row.createTime) }}
      </template>
        </el-table-column>
        <el-table-column label="操作">
      <template #default="{ row }">
        <el-button text type="primary" @click="editUser(row.id)">编辑</el-button>
          <el-button text type="primary" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  <div class="foot">
    <div class="left">
      <el-select class="m-2" v-model="optionList" placeholder="批量操作">
        <el-option v-for="item in options" ::key="item.value" :value="item.value" :label="item.label" />
      </el-select>
      <el-button type="primary" @click="ConfirmTn">确定</el-button>
    </div>
    <ElConfigProvider :locale="zhCn">
      <div class="page">
        <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :page-sizes="[5,10,15]"
          background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="queryReturnReasonList"
          @current-change="queryReturnReasonList" />
      </div>
    </ElConfigProvider>
  </div>
  <ReasonCreate :show="showDialog" @hide="closeDialog" :id="editId" />
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable'
import { ElMessageBox, ElMessage } from 'element-plus';
import {Tickets } from "@element-plus/icons-vue"
import { formateDate } from '@/utils'
import { ref ,reactive} from "vue";
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { getReturnReasonListApi ,DeleteReturnReasonApi,switchReturnReasonStatusApi,getReturnBatchDeleteApi} from './api'
import ReasonCreate from "./returnReasonCreate.vue"
const showDialog = ref(false);
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false;
  if (isReload) queryReturnReasonList();
};
const editId = ref(0);
const editUser = (id: number) => {
  editId.value = id;
  showDialog.value = true;
};
const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 5
})

const list = ref<returnReasonCreateModel[]>([]);
const total = ref(0)
const deleteList = ref<number[]>([])
const optionList = ref([])
const options = [
    { value: '0', label: '删除', },
]
// 修改启用
const switchStatus = (row: returnReasonCreateModel) => {
  switchReturnReasonStatusApi(row.id!, row.status)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功！");
      } else {
        row.status = row.status === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.status = row.status === 1 ? 0 : 1;
    });
};
// 删除退货原因
const del = (id: number) => {
  ElMessageBox.confirm('是否要进行该删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    DeleteReturnReasonApi(id).then((res) => {
      if (res.code === 200) {
        ElMessage.success('删除成功');
        queryReturnReasonList();
      }
    })
  }).catch(() => { })

}

const handleSelectionChange = (val: returnReasonCreateModel[]) => {
    val.forEach(item => {
        list.value.find(sur => sur.id === item.id)
        deleteList.value.push(item.id)
    })
}

// 批量操作
const ConfirmTn = () => {
    if (optionList.value[0] == 0) {
        if (deleteList.value.length == 0) {
            ElMessage.warning('请选择要操作的订单')
            return;
        }
        ElMessageBox.confirm("是否要进行批量删除操作?", "提示?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: 'warning',
        }).then(() => {
            getReturnBatchDeleteApi(deleteList.value).then(res => {
                if (res.code === 200) {
                    ElMessage.success('删除成功')
                    queryReturnReasonList();
                }
            })
        })
    } else {
        ElMessage.warning('请选择要执行的操作!')
    }
}
// 封装退货原因数据
const queryReturnReasonList = () => {
  getReturnReasonListApi(queryParams).then((res) => {
    if (res.code === 200) {
      list.value = res.data.list;
      total.value = res.data.total
    }
  });
};
queryReturnReasonList()
</script>
<style lang="less" scoped>
.add-area {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  .text{
    display: flex;
    align-items: center;
    span{
      padding-left: 10px;
    }
  }
}
.foot {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
}
</style>